<template>
  <div id="mv-container">
    <ul class="tab">
      <li v-for="(title, index) in titleList" @click="handleClick(index)" :key="title" :class="{active: currentIndex === index}" title="死数据">{{title}}</li>
    </ul>
    <div class="image-list">
      <div v-for=" mv in mvList"
           :key="mv.id"
           class="image-item">
        <div class="bg-img">
          <img :src="mv.pic"
               alt="">
          <div class="attr">
            <span>{{ mv.mvPlayCnt }}</span>
            <span>{{ mv.songTimeMinutes }}</span>
          </div>
        </div>
        <p>{{ mv.name }}</p>
        <span>{{ mv.artist }}</span>
      </div>
      <div class="image-item wrap" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Video',
  data () {
    return {
      currentIndex: 0,
      titleList: ['首播', '华语', '网络', '欧美', '现场', '热舞', '伤感', '剧情'],
      mvList: [
        {
          'duration': 247,
          'artist': 'Sam Smith',
          'mvPlayCnt': 2198,
          'name': 'The Lighthouse Keeper',
          'online': 1,
          'songTimeMinutes': '04:07',
          'artistid': 118370,
          'id': 156755380,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/78/3/4093527818.jpg'
        },
        {
          'duration': 223,
          'artist': 'Twice',
          'mvPlayCnt': 12190,
          'name': 'BETTER',
          'online': 1,
          'songTimeMinutes': '03:43',
          'artistid': 263053,
          'id': 155515226,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/1/7/1214239470.jpg'
        },
        {
          'duration': 224,
          'artist': '刘德华',
          'mvPlayCnt': 6126,
          'name': '狮子山下',
          'online': 1,
          'songTimeMinutes': '03:44',
          'artistid': 286,
          'id': 156505081,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/66/73/588659300.jpg'
        },
        {
          'duration': 180,
          'artist': '张碧晨',
          'mvPlayCnt': 4652,
          'name': '以剑为期',
          'online': 1,
          'songTimeMinutes': '03:00',
          'artistid': 195792,
          'id': 157025307,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/73/23/1644018429.jpg'
        },
        {
          'duration': 226,
          'artist': '张杰',
          'mvPlayCnt': 27513,
          'name': '吞噬星空',
          'online': 1,
          'songTimeMinutes': '03:46',
          'artistid': 680,
          'id': 156991791,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/93/95/1448749776.jpg'
        },
        {
          'duration': 160,
          'artist': '硬糖少女303希林娜依·高&硬糖少女303赵粤&硬糖少女303陈卓璇&硬糖少女303郑乃馨&硬糖少女303刘些宁',
          'mvPlayCnt': 15771,
          'name': '拉我',
          'online': 1,
          'songTimeMinutes': '02:40',
          'artistid': 1518540,
          'id': 157191564,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/25/12/2094038573.jpg'
        },
        {
          'duration': 278,
          'artist': '单依纯',
          'mvPlayCnt': 58653,
          'name': '给电影人的情书',
          'online': 1,
          'songTimeMinutes': '04:38',
          'artistid': 2724951,
          'id': 157046942,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/8/39/2974001597.jpg'
        },
        {
          'duration': 199,
          'artist': '徐梦圆&双笙（陈元汐）',
          'mvPlayCnt': 10856,
          'name': '如虎',
          'online': 1,
          'songTimeMinutes': '03:19',
          'artistid': 271275,
          'id': 156495802,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/55/44/878032042.jpg'
        },
        {
          'duration': 270,
          'artist': '吴青峰',
          'mvPlayCnt': 914,
          'name': '宁静海',
          'online': 1,
          'songTimeMinutes': '04:30',
          'artistid': 63220,
          'id': 153252230,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/48/3/1037643682.jpg'
        },
        {
          'duration': 216,
          'artist': '刘德华',
          'mvPlayCnt': 17048,
          'name': '谁能明白我',
          'online': 1,
          'songTimeMinutes': '03:36',
          'artistid': 286,
          'id': 155900355,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/98/83/613641438.jpg'
        },
        {
          'duration': 294,
          'artist': '尚雯婕',
          'mvPlayCnt': 9048,
          'name': '若燕',
          'online': 1,
          'songTimeMinutes': '04:54',
          'artistid': 1275,
          'id': 155992334,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/69/5/666342548.jpg'
        },
        {
          'duration': 213,
          'artist': '丁当&袁咏琳',
          'mvPlayCnt': 1869,
          'name': '我要我',
          'online': 1,
          'songTimeMinutes': '03:33',
          'artistid': 1649,
          'id': 156597571,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/38/41/3571503080.jpg'
        },
        {
          'duration': 191,
          'artist': '刘宪华',
          'mvPlayCnt': 3426,
          'name': 'Radio',
          'online': 1,
          'songTimeMinutes': '03:11',
          'artistid': 109927,
          'id': 156574219,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/97/98/2609659962.jpg'
        },
        {
          'duration': 269,
          'artist': '陈奕迅',
          'mvPlayCnt': 8295,
          'name': '是但求其爱',
          'online': 1,
          'songTimeMinutes': '04:29',
          'artistid': 47,
          'id': 156699298,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/57/20/2420959501.jpg'
        },
        {
          'duration': 307,
          'artist': '伍佰',
          'mvPlayCnt': 10378,
          'name': '风平浪静',
          'online': 1,
          'songTimeMinutes': '05:07',
          'artistid': 195702,
          'id': 154518535,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/70/99/2821963930.jpg'
        },
        {
          'duration': 202,
          'artist': '周笔畅',
          'mvPlayCnt': 9778,
          'name': '别',
          'online': 1,
          'songTimeMinutes': '03:22',
          'artistid': 1115,
          'id': 155052242,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/94/87/45930506.jpg'
        },
        {
          'duration': 188,
          'artist': 'Tizzy T&Jony J&和平精英',
          'mvPlayCnt': 9418,
          'name': 'Winner Winner（和平精英2020PEC年度盛典主题曲）',
          'online': 1,
          'songTimeMinutes': '03:08',
          'artistid': 298471,
          'id': 154563398,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/58/5/3340744897.jpg'
        },
        {
          'duration': 188,
          'artist': '易烊千玺',
          'mvPlayCnt': 9734,
          'name': '繁星追梦（王者荣耀梦想主题曲）',
          'online': 1,
          'songTimeMinutes': '03:08',
          'artistid': 192913,
          'id': 153517024,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/93/28/2241934977.jpg'
        },
        {
          'duration': 230,
          'artist': 'G.E.M.邓紫棋',
          'mvPlayCnt': 33367,
          'name': '孤独',
          'online': 1,
          'songTimeMinutes': '03:50',
          'artistid': 5371,
          'id': 152534804,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/89/91/2915905606.jpg'
        },
        {
          'duration': 166,
          'artist': '派伟俊',
          'mvPlayCnt': 2335,
          'name': 'Somebody',
          'online': 1,
          'songTimeMinutes': '02:46',
          'artistid': 263956,
          'id': 152133204,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/72/9/823274720.jpg'
        },
        {
          'duration': 228,
          'artist': '张韶涵',
          'mvPlayCnt': 5761,
          'name': '月半爱丽丝',
          'online': 1,
          'songTimeMinutes': '03:48',
          'artistid': 492,
          'id': 152146559,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/1/36/2162517738.jpg'
        },
        {
          'duration': 269,
          'artist': '张一鸣&梁龙&王晰',
          'mvPlayCnt': 2652,
          'name': '我们的歌',
          'online': 1,
          'songTimeMinutes': '04:29',
          'artistid': 5970281,
          'id': 152777242,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/11/12/1263967466.jpg'
        },
        {
          'duration': 265,
          'artist': '李宇春&INTO1-刘彰&Subs张毅成&鱼翅Fin&于贞',
          'mvPlayCnt': 23572,
          'name': '国家2020',
          'online': 1,
          'songTimeMinutes': '04:25',
          'artistid': 801,
          'id': 152027905,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/90/50/4275757787.jpg'
        },
        {
          'duration': 139,
          'artist': '黄渤&王宝强&刘昊然&王砚辉&王迅&董子健&佟丽娅',
          'mvPlayCnt': 20394,
          'name': '山那边',
          'online': 1,
          'songTimeMinutes': '02:19',
          'artistid': 11210,
          'id': 150748364,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/94/33/1332494149.jpg'
        },
        {
          'duration': 212,
          'artist': 'Justin Bieber&Chance the Rapper',
          'mvPlayCnt': 13681,
          'name': 'Holy',
          'online': 1,
          'songTimeMinutes': '03:32',
          'artistid': 5317,
          'id': 150554582,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/51/41/3594132359.jpg'
        },
        {
          'duration': 272,
          'artist': '吴青峰',
          'mvPlayCnt': 2112,
          'name': '最难的是相遇',
          'online': 1,
          'songTimeMinutes': '04:32',
          'artistid': 63220,
          'id': 150370301,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/70/6/3536637397.jpg'
        },
        {
          'duration': 297,
          'artist': '白宇',
          'mvPlayCnt': 5981,
          'name': '长夜',
          'online': 1,
          'songTimeMinutes': '04:57',
          'artistid': 250333,
          'id': 150408652,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/63/12/1425220462.jpg'
        },
        {
          'duration': 229,
          'artist': '郑秀文',
          'mvPlayCnt': 10542,
          'name': '如何忍眼泪',
          'online': 1,
          'songTimeMinutes': '03:49',
          'artistid': 307,
          'id': 149532616,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/26/99/321423503.jpg'
        },
        {
          'duration': 257,
          'artist': '于文文',
          'mvPlayCnt': 8149,
          'name': '白衣少年',
          'online': 1,
          'songTimeMinutes': '04:17',
          'artistid': 118640,
          'id': 150225989,
          'pic': 'https://img1.kuwo.cn/wmvpic/324/93/43/2649834907.jpg'
        }
      ]
    }
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index
      this.mvList.reverse()
    }
  } 
}
</script>

<style lang="less" scoped >
img {
  margin-right: 0;
  margin-top: 0;
}
span {
  padding-left: 0;
}
ul li {
  list-style: none;
}
ul {
  margin: 0;
  padding: 0;
}
#mv-container {
  width: 1300px;
  height: 100%;
  margin: 0 auto;
}
ul {
  width: 100%;
  display: flex;
  font-size: 14px;
}
p {
  margin: 0;
}
ul li {
  margin-right: 20px;
  padding: 6px 16px;
  border-radius: 15px;
  cursor: pointer;
}
.active {
  font-weight: 700;
  background-color: #ffe443;
}
.image-list {
  margin-top: 50px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.image-list .image-item {
  box-sizing: border-box;
  padding-bottom: 20px;
}
.image-list .image-item .bg-img {
  position: relative;
  width: 100%;
  height: 123px;
}
.image-list .image-item img {
  width: 220px;
  height: 100%;
  transition: transform 1s;
}
.image-list .image-item:hover img {
  transform: scale(1.1);
}
.image-list .image-item .attr {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
}
.image-list .image-item .attr span {
  color: #fff;
}
.image-list .image-item > p {
  font-size: 18px;
  color: #333;
  margin: 15px 0 4px 0;
  font-weight: 600;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.image-list .image-item > span {
  font-size: 14px;
  color: #aaa;
  display: inline-block;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.image-list .wrap {
  width: 220px;
}
ul {
  width: 100%;
  display: flex;
  font-size: 14px;
}
p {
  margin: 0;
}
ul li {
  margin-right: 20px;
  padding: 6px 16px;
  border-radius: 15px;
}
.active {
  font-weight: 700;
  background-color: #ffe443;
}
.image-list {
  margin-top: 50px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.image-list .image-item {
  box-sizing: border-box;
  padding-bottom: 20px;
}
.image-list .image-item .bg-img {
  position: relative;
  width: 100%;
  height: 123px;
  overflow: hidden;
}
.image-list .image-item img {
  width: 220px;
  height: 100%;
  transition: transform 1s;
}
.image-list .image-item:hover img {
  transform: scale(1.1);
}
.image-list .image-item .attr {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
}
.image-list .image-item .attr span {
  color: #fff;
}
.image-list .image-item > p {
  font-size: 18px;
  color: #333;
  margin: 15px 0 4px 0;
  font-weight: 600;
}
.image-list .image-item > span {
  font-size: 14px;
  color: #aaa;
}
  ul {
    width: 100%;
    display: flex;
    font-size: 14px;
  }
  p {
    margin: 0;
  }
  ul li {
    margin-right: 20px;
    padding: 6px 16px;
    border-radius: 15px;
  }
  .active {
    font-weight: 700;
    background-color: #ffe443;
  }
  .image-list {
    margin-top: 50px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content:space-between;
  }
  .image-list .image-item {
    box-sizing: border-box;
    padding-bottom: 20px;
  }
  .image-list .image-item .bg-img {
    position: relative;
    width: 100%;
    height: 123px;
    overflow: hidden;
  }
  .image-list .image-item img {
    width: 220px;
    height: 100%;
    transition: transform 1s;
  }
  .image-list .image-item:hover img{
    transform: scale(1.1);
  }
  .image-list .image-item .attr {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
  }
  .image-list .image-item .attr span {
    color: #fff;
  }
  .image-list .image-item > p{
    font-size: 18px;
    color: #333;
    margin: 15px 0 4px 0;
    font-weight: 600;
  }
  .image-list .image-item > span {
    font-size: 14px;
    color: #aaa;
  }
</style>
